import React from 'react';
import { Icon } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

export default ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => (
  <div
    className={classNames(styles.numberInfo, {
      [styles[`numberInfo${theme}`]]: theme,
    })}
    {...rest}
  >
    {title && <div className={styles.numberInfoTitle}>{title}</div>}
    {subTitle && (
      <div className={styles.numberInfoSubTitle}>
        {subTitle}:
        <span>
          {suffix && (
            <em className={styles.suffix}>
              {total} {suffix}
            </em>
          )}
        </span>
      </div>
    )}
    <div className={styles.numberInfoValue} style={gap ? { marginTop: gap } : null}>
      {/* <span>
        {total}
        {suffix && <em className={styles.suffix}>{suffix}</em>}
      </span> */}
      {(status || subTotal) && (
        <span className={styles.subTotal}>
          {subTotal}
          {status && <Icon type={`caret-${status}`} />}
        </span>
      )}
    </div>
  </div>
);
